<div class="mask" (click)="goBack()">
  <div class="container" (click)="$event.stopPropagation()">
    <div style="text-align: right;">
      <button nz-button nzType="primary" nzSize="large" nzShape="circle"
              (click)="confirm()" style="margin-right:10px;">
        <i nz-icon nzType="check"></i>
      </button>
      <button nz-button nz-popconfirm nzPlacement="bottomRight"
              nzTitle="你真的要删除这条待办事项吗？"
              (nzOnConfirm)="delete()"
              nzType="danger"
              nzSize="large" nzShape="circle">
        <i nz-icon nzType="delete"></i>
      </button>
    </div>
    <label nz-checkbox
           (click)="$event.stopPropagation()"
           [(ngModel)]="currentTodo.completedFlag">
      <span>标记完成</span>
    </label>
    <nz-divider nzText="标题" nzOrientation="left"></nz-divider>
    <div class="input-container">
      <input nz-input [(ngModel)]="currentTodo.title" placeholder="待办事项" [disabled]="!!currentTodo.completedFlag"
             id="title" name="title">
    </div>
    <nz-divider nzText="日期与提醒" nzOrientation="left"></nz-divider>
    <div class="due-date-container input-container">
      <span class="prefix">截止日期</span>
      <nz-date-picker [(ngModel)]="dueDate" [disabled]="!!currentTodo.completedFlag" [nzDisabledDate]="dueDisabledDate"
                      (ngModelChange)="handleDueDateChange($event)">
      </nz-date-picker>
    </div>
    <div class="plan-date-container input-container">
      <span class="prefix">计划日期</span>
      <nz-date-picker nzShowTime [(ngModel)]="planDate" [disabled]="!!currentTodo.completedFlag"
                      [nzDisabledDate]="planDisabledDate"
                      (ngModelChange)="handlePlanDateChange($event)">
      </nz-date-picker>
    </div>
    <div class="input-container">
      <span class="prefix">计划提醒</span>
      <nz-switch [(ngModel)]="currentTodo.notifyMe" [nzControl]="true" [nzDisabled]="!!currentTodo.completedFlag"
                 (click)="clickSwitch()"></nz-switch>
    </div>
    <nz-divider nzText="更多" nzOrientation="left"></nz-divider>
    <div class="input-container">
      <textarea nz-input="" row="8" placeholder="待办详情" [disabled]="!!currentTodo.completedFlag"
                [(ngModel)]="currentTodo.desc"></textarea>
    </div>
  </div>
</div>
